<template>
  <el-container class="container">
    <card>
      <Divider orientation="left">
        注册
      </Divider>
      <el-form ref="regForm" status-icon :model="regForm" :rules="regRules" label-position="left" label-width="100px">
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <el-form-item prop="name">
              <p slot="label" style="letter-spacing: 2em;">
                姓<span>名:</span>
              </p>
              <el-input v-model="regForm.name" />
            </el-form-item>
            <el-form-item prop="id">
              <p slot="label" style="letter-spacing: 2em;">
                工<span>号:</span>
              </p>
              <el-input v-model="regForm.id" />
            </el-form-item>
            <el-form-item prop="dept">
              <p slot="label">
                所属部<span>门:</span>
              </p>
              <el-select v-model="regForm.dept" filterable placeholder="" style="width: 100%;">
                <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="tel">
              <p slot="label" style="letter-spacing: .5em;">
                手机<span>号:</span>
              </p>
              <el-input v-model="regForm.tel" />
            </el-form-item>
            <el-form-item prop="email">
              <p slot="label" style="letter-spacing: 2em;">
                邮<span>箱:</span>
              </p>
              <el-input v-model="regForm.email" />
            </el-form-item>
            <el-form-item prop="password">
              <p slot="label" style="letter-spacing: 2em;">
                密<span>码:</span>
              </p>
              <el-input v-model="regForm.password" type="password" />
            </el-form-item>
            <el-form-item prop="repassword">
              <p slot="label">
                确认密<span>码:</span>
              </p>
              <el-input v-model="regForm.repassword" type="password" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="faceuri" class="el-form--label-top" label-width="150px" label="上传人脸信息:">
              <video v-show="videoShow" id="video" />
              <canvas v-show="canvasShow" id="canvas" />
              <el-row type="flex" justify="space-around">
                <el-input v-if="false" v-model="regForm.faceuri" />
                <el-col :span="10">
                  <el-button type="primary" style="width: 100%;" @click="turnOn">
                    {{ videoShow ? '开启摄像头' : '重新拍照' }}
                  </el-button>
                </el-col>
                <el-col :span="10">
                  <el-button type="primary" style="width: 100%;" @click="photo">
                    确认上传
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50" type="flex" justify="center" style="margin-top: 2%">
          <el-col :span="6">
            <el-button type="primary" style="width: 100%;" @click="handleReg">
              提交注册申请
            </el-button>
          </el-col>
          <el-col :span="3">
            <router-link to="/login">
              <el-button type="info" style="width: 100%;">
                取消
              </el-button>
            </router-link>
          </el-col>
        </el-row>
      </el-form>
    </card>
  </el-container>
</template>

<script>
import Card from '@/components/Card'
import { Divider } from 'iview'
import { getMedia, takePhoto, stop } from '@/utils/camera.js'
import { findAllDept } from '@/api/dept.js'
import { register } from '@/api/auth'
import { validatePass } from '@/utils/validate'

export default {
  components: { Card, Divider },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!validatePass(value)) {
        callback(new Error('密码仅支持数字或英文'))
      } else {
        if (this.regForm.repassword !== '') {
          this.$refs.regForm.validateField('repassword')
        }
        callback()
      }
    }
    const validateRePassword = (rule, value, callback) => {
      if (value !== this.regForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      depts: [],
      regForm: {
        id: '',
        name: '',
        password: '',
        dept: '',
        faceuri: '',
        email: '',
        tel: '',
        repassword: ''
      },
      regRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        dept: [
          { required: true, message: '请输入所属部门', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确手机号', trigger: ['blur', 'change'] }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确邮箱', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '请正确输入密码(密码长度6 ~ 16位)', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validateRePassword, trigger: 'blur' }
        ],
        faceuri: [
          { required: true, message: '请上传人脸信息', trigger: 'blur' }
        ]
      },
      videoShow: true,
      canvasShow: false,
      email: ['@qq.com', '@gmail.com', '@163.com', '@yahoo.com', '@msn.com', '@hotmail.com', '@126.com', '@foxmail.com', '@sohu.com', '@sina.com']
    }
  },
  async mounted() {
    const res = await findAllDept()
    this.depts = res.data.data
  },
  destroyed() {
    stop()
  },
  methods: {
    handleReg() {
      this.$refs.regForm.validate(valid => {
        if (valid) {
          const user = Object.assign({}, this.regForm)
          delete user.repassword
          register(user).then(res => {
            if (res.data.code === 0) {
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '注册失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    turnOn() {
      this.videoShow = true
      this.canvasShow = false
      const video = document.getElementById('video')
      const constraints = {
        video: {
          width: 300,
          height: 300
        },
        audio: false
      }
      getMedia(constraints, video)
    },
    photo() {
      const video = document.getElementById('video')
      const canvas = document.getElementById('canvas')
      const type = 'jpeg'
      const quality = 1
      const width = video.offsetWidth
      const height = video.offsetHeight
      const res = takePhoto(type, quality, video, canvas, width, height)
      this.videoShow = false
      this.canvasShow = true
      this.regForm.faceuri = res.base64
      this.$notify({
        title: '成功',
        message: '拍照完成',
        type: 'success',
        duration: 2000
      })
      stop()
    },
    querySearch(query, cb) {

    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background: url('../../assets/背景.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ivu-divider {
  font-size: 24px;
  text-indent: .5em;
  letter-spacing: 1em;
  margin-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
}

.ivu-divider:before,
.ivu-divider:after {
  border-top-color: #F3AC8E;
}

.el-form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.el-form-item >>> label {
  font-weight: 500;
}

.el-form-item label p {
  display: inline-block;
}

.el-form-item label p span {
  letter-spacing: 0;
}

.el-form--label-top >>> .el-form-item__label {
  transform: translateX(50%);
}

#video {
  width: 300px;
  height: 300px;
  border: 2px solid #EAAD94;
  background-color: #fff;

}
#canvas {
}
</style>
